<script>
    import {fns, SvelteUIProvider, Switch, Button, Image, Badge} from "@svelteuidev/core";
    import { AppShell, Navbar, Header} from '@svelteuidev/core';
    // import  General from './pages/General.svelte'
    // import  Hardware from './pages/HardwareEdit.svelte'
    // import  Animator from './pages/AnimatorEdit.svelte'
    import Logo from "../src/assets/logo.jpg"
    import Page from "../view/user.svelte"
    import Login from "../view/login.svelte"
    import chatPage from "./ChatPage.svelte";
    import userPage from "./UserPage.svelte"
    import filePage from "./FilePage.svelte"
    import { flip } from 'svelte/animate';
    let isDark = false;
    let opened = true;
    function toggleTheme() {
        isDark = !isDark;
    }
    function toggleOpened() {
        opened = !opened;
    }
    var pages = {
        "chatPage":chatPage,
        "userPage":userPage,
        "filePage":filePage
        // "general":General,
        // "hardware":Hardware,
        // "animator":Animator
    }
    let currentPage = "chatPage";
</script>

<main style="width: 100%;height: 100%">
<SvelteUIProvider withGlobalStyles themeObserver={isDark ? 'dark' : 'light'}>
    <AppShell
            override={{
		main: { bc: isDark ? fns.themeColor('dark', 8) : fns.themeColor('gray', 0) }
	}}>
        <Navbar
                slot="navbar"
                hidden={!opened}
                width={{ base: 150 }}
                height={520}
                override={{ p: 'xsdPX' }}
        >
<!--            Profile:-->
<!--            <select>-->
<!--                <option>+new</option>-->
<!--            </select>\-->
            <Badge size="xl" style="margin:15px 5px 10px 5px">
                用户导航
            </Badge>
            <Button style="margin: 5px" variant={currentPage==="chatPage"?'gradient':'outline'} color="blue" radius="xl" size="md" ripple on:click={()=>{currentPage="chatPage"}}>在线聊天</Button>
            <Button style="margin: 5px" variant={currentPage==="userPage"?'gradient':'outline'} color="blue" radius="xl" size="md" ripple on:click={()=>{currentPage="userPage"}}>用户管理</Button>
            <Button style="margin: 5px" variant={currentPage==="filePage"?'gradient':'outline'} color="blue" radius="xl" size="md" ripple on:click={()=>{currentPage="filePage"}}>文件管理</Button>
<!--            <Button variant="outline" color="yellow" radius="xl" size="md" ripple on:click={()=>{currentPage="hardware"}}>Hardware</Button>-->

        </Navbar>
        <Header slot="header" height={60} override={{ p: '$mdPX' }}>
            <div>
                <div style="float: left;margin-left: 5px">
                    <Image src={Logo} alt="TestU.eu" height={40} fit="contain"/>
                </div>
            <div style="float: left">
                <span style="font-weight: bold;color: #40b3ff;font-size: 22px;line-height: 40px;margin-left: 20px">
                    Svelte-App
                </span>
            </div>
            </div>
            <div class="left-aligned">
                <Switch checked={true} on:change={toggleTheme} />
            </div>
        </Header>

        <main>
            <svelte:component this={pages[currentPage]}/>
        </main>
    </AppShell>
</SvelteUIProvider>
</main>
<style>
    .left-aligned{
        float: right;
    }
</style>


<svelte:head>
    <!-- Fonts -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700">

    <!-- Material Typography -->
    <link rel="stylesheet" href="../link/http_unpkg.com_@material_typography@14.0.0_dist_mdc.typography.css" />

    <!-- SMUI -->
    <link rel="stylesheet" href="../link/http_unpkg.com_svelte-material-ui_bare.css" />

</svelte:head>